<template>
  <div class="dedail">
    <img :src="`https://weapp.jasonandjay.com/fileupload${list.goodsImgUrl}`" alt />
    <p>{{list.goodsName}}</p>
    <p>
      <b style="color:red">
        ￥{{list.goodsPrice}}
        <span style="margin-left:500rpx;">-</span>
        <span class="span">{{list.goodsType}}</span>
        <span @click="add(list)">+</span>
      </b>
      <span class="spans">
        <!-- <img src="../../static/优惠劵.png" alt style="width:60rpx; height:60rpx;" /> -->
      </span>
      <span class="spans">
        <!-- <img src="../../static/联系商家.png" alt style="width:40rpx; height:40rpx;" /> -->
      </span>
      <span class="spans"></span>
    </p>
    <div style="padding-top:30rpx;">菜品</div>
    <main>
      <p style="padding-top:30rpx;">￥{{price}}</p>
      <p class="pss">立即购买</p>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      price:0
    };
  },
  onLoad: function(options) {
    this.list = JSON.parse(decodeURIComponent(options.item));

    console.log(this.list, "ww");
  },
  methods: {
    add(list) {
      list.goodsType++;
       this.price=this.list.goodsType*this.list.goodsPrice
    },
 
  },
 
};
</script>

<style >
span {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  line-height: 50rpx;
  text-align: center;
  background: red;
  color: #000;
  margin-bottom: 20rpx;
}
.span {
  background: #eee;
  width: 50rpx;
  height: 50rpx;
}
.spans {
  width: 100%;
  height: 100rpx;
  background: rgb(248, 247, 247);
  border-radius: 20rpx;
  margin: auto;
}
main {
  width: 100%;
  height: 100rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
.pss {
  width: 150rpx;
  height: 60rpx;
  background: red;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  position: fixed;
  right: 0;
  bottom: 20rpx;
  line-height: 60rpx;
  font-size: 32rpx;
  text-align: center;
  color: #fff;
}
</style>